<template>
	<div>
		<mj-title type="h2" title="Icon 图标"></mj-title>
		<div class="page-desc">提供了一套常用的图标集合。</div>

		<mj-title type="h5" title="如何使用"></mj-title>
		<mj-tabs>
			<mj-tab-pane label="HTML" name="html">
				<Icon type="delete" size="30" />
				<Icon type="search" size="30" />
				<Icon type="upload" size="30" />
				<Icon type="add" size="30" />
				<Icon type="download" size="30" />
				<Icon type="edit" size="30" color="#f80" />
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
        <pre>
          <code class="language-html line-numbers">
          &lt;Icon type="delete" size="30" />
          &lt;Icon type="search" size="30" />
          &lt;Icon type="upload" size="30" />
          &lt;Icon type="add" size="30" />
          &lt;Icon type="download" size="30" />
          &lt;Icon type="edit" size="30" color="#f80" />
          </code>
        </pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-divider>如何使用</mj-divider>
		<div class="page-desc">
			<p>使用<code>&lt;Icon /&gt;</code>组件，指定图标对应的<code>type</code>属性</p>
			<p>支持自定义图标，你可以引入任意的字体文件库来使用。<code>&lt;Icon custom="iconfont" /&gt;</code></p>
		</div>

		<mj-title type="h5" title="图标示例"></mj-title>
		<div class="page-desc">使用<code>icon-</code>后面的图标名称</div>
		<div id="icon-list" class="mb30">
			<div v-html="fontList"></div>
        <ul class="icon_lists dib-box">
          
          <li class="dib">
              <span class="icon icon icon-baocun"></span>
              <div class="name">保存</div>
              <div class="code-name">.icon-baocun</div>
          </li>

          <li class="dib">
            <span class="icon icon icon-edit-outline"></span>
            <div class="name">
              edit-outline
            </div>
            <div class="code-name">.icon-edit-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-youyi-jiantou"></span>
            <div class="name">
              youyi-jiantou
            </div>
            <div class="code-name">.icon-youyi-jiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-zuoyi-jiantou"></span>
            <div class="name">
              zuoyi-jiantou
            </div>
            <div class="code-name">.icon-zuoyi-jiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-xiayi-jiantou"></span>
            <div class="name">
              xiayi-jiantou
            </div>
            <div class="code-name">.icon-xiayi-jiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-shangyi-jiantou"></span>
            <div class="name">
              shangyi-jiantou
            </div>
            <div class="code-name">.icon-shangyi-jiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-remove"></span>
            <div class="name">
              remove
            </div>
            <div class="code-name">.icon-remove
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-circle-plus"></span>
            <div class="name">
              circle-plus
            </div>
            <div class="code-name">.icon-circle-plus
            </div>
          </li>

          <li class="dib">
            <span class="icon icon icon-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.icon-loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-image"></span>
            <div class="name">
              ic_image
            </div>
            <div class="code-name">.icon-image
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-yujing"></span>
            <div class="name">
              预警
            </div>
            <div class="code-name">.icon-yujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-yujing-set"></span>
            <div class="name">
              项目预警设置
            </div>
            <div class="code-name">.icon-yujing-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-print"></span>
            <div class="name">
              打印
            </div>
            <div class="code-name">.icon-print
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-user-add"></span>
            <div class="name">
              user-add
            </div>
            <div class="code-name">.icon-user-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-zuzhi"></span>
            <div class="name">
              组织
            </div>
            <div class="code-name">.icon-zuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-sys-set"></span>
            <div class="name">
              系统设置
            </div>
            <div class="code-name">.icon-sys-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-user-group"></span>
            <div class="name">
              客户管理
            </div>
            <div class="code-name">.icon-user-group
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-user-info"></span>
            <div class="name">
              企业招聘人员
            </div>
            <div class="code-name">.icon-user-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-cloud-download"></span>
            <div class="name">
              数据下载
            </div>
            <div class="code-name">.icon-cloud-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-file"></span>
            <div class="name">
              任务中心
            </div>
            <div class="code-name">.icon-file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-cloud-upload"></span>
            <div class="name">
              数据上传
            </div>
            <div class="code-name">.icon-cloud-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-chat"></span>
            <div class="name">
              功能栏-信息中心
            </div>
            <div class="code-name">.icon-chat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-phone"></span>
            <div class="name">
              icon_Phone
            </div>
            <div class="code-name">.icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-notification"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">.icon-notification
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-sort"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.icon-sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-ellipsis"></span>
            <div class="name">
              ellipsis
            </div>
            <div class="code-name">.icon-ellipsis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-hot"></span>
            <div class="name">
              hot
            </div>
            <div class="code-name">.icon-hot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-setting"></span>
            <div class="name">
              管理
            </div>
            <div class="code-name">.icon-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-integral"></span>
            <div class="name">
              integral
            </div>
            <div class="code-name">.icon-integral
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-kaoshifenxi"></span>
            <div class="name">
              考试分析
            </div>
            <div class="code-name">.icon-kaoshifenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-chart-bar"></span>
            <div class="name">
              chart_bar
            </div>
            <div class="code-name">.icon-chart-bar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-share-line"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-minus-outline"></span>
            <div class="name">
              减少
            </div>
            <div class="code-name">.icon-minus-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-fujian"></span>
            <div class="name">
              附件
            </div>
            <div class="code-name">.icon-fujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-tips"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon-tips
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-security"></span>
            <div class="name">
              验证码
            </div>
            <div class="code-name">.icon-security
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-add-outline"></span>
            <div class="name">
              增加
            </div>
            <div class="code-name">.icon-add-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-reset"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.icon-reset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-left-line"></span>
            <div class="name">
              arrow_right-copy
            </div>
            <div class="code-name">.icon-arrow-left-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-up-line"></span>
            <div class="name">
              arrow_right-copy
            </div>
            <div class="code-name">.icon-arrow-up-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-down-line"></span>
            <div class="name">
              arrow_right-copy
            </div>
            <div class="code-name">.icon-arrow-down-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-right-line"></span>
            <div class="name">
              arrow_right
            </div>
            <div class="code-name">.icon-arrow-right-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-menu-fold-right"></span>
            <div class="name">
              menu-fold-copy
            </div>
            <div class="code-name">.icon-menu-fold-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-folder-lock"></span>
            <div class="name">
              folder6-文件夹
            </div>
            <div class="code-name">.icon-folder-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-star"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.icon-star
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-star-outline"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.icon-star-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-undo"></span>
            <div class="name">
              undo
            </div>
            <div class="code-name">.icon-undo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-folder-outline"></span>
            <div class="name">
              24gl-folder3
            </div>
            <div class="code-name">.icon-folder-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-folder-minus"></span>
            <div class="name">
              24gl-folderMinus
            </div>
            <div class="code-name">.icon-folder-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-folder-open"></span>
            <div class="name">
              24gl-folderOpen
            </div>
            <div class="code-name">.icon-folder-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-folder-add"></span>
            <div class="name">
              24gl-folderPlus
            </div>
            <div class="code-name">.icon-folder-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-location"></span>
            <div class="name">
              Location, pin, marker
            </div>
            <div class="code-name">.icon-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-menu-fold-left"></span>
            <div class="name">
              menu-fold
            </div>
            <div class="code-name">.icon-menu-fold-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-key"></span>
            <div class="name">
              key
            </div>
            <div class="code-name">.icon-key
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-warning-filling"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.icon-warning-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-info-filling"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-info-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-error-filling"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.icon-error-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-success-filling"></span>
            <div class="name">
              success-filling
            </div>
            <div class="code-name">.icon-success-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-question-circle"></span>
            <div class="name">
              question
            </div>
            <div class="code-name">.icon-question-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-warning-circle"></span>
            <div class="name">
              警告
            </div>
            <div class="code-name">.icon-warning-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-info-circle"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon-info-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-max"></span>
            <div class="name">
              maximize
            </div>
            <div class="code-name">.icon-max
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-full"></span>
            <div class="name">
              fullscreen-expand
            </div>
            <div class="code-name">.icon-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-minus"></span>
            <div class="name">
              minus
            </div>
            <div class="code-name">.icon-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.icon-success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-eye-no"></span>
            <div class="name">
              eyes_hover
            </div>
            <div class="code-name">.icon-eye-no
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-eye"></span>
            <div class="name">
              Red eye
            </div>
            <div class="code-name">.icon-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-error-circle"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-error-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-question"></span>
            <div class="name">
              问号
            </div>
            <div class="code-name">.icon-question
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-up-filling"></span>
            <div class="name">
              arrow-up-filling
            </div>
            <div class="code-name">.icon-arrow-up-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-down-filling"></span>
            <div class="name">
              arrow-down-filling
            </div>
            <div class="code-name">.icon-arrow-down-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-left-filling"></span>
            <div class="name">
              arrow-left-filling
            </div>
            <div class="code-name">.icon-arrow-left-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-right-filling"></span>
            <div class="name">
              arrow-right-filling
            </div>
            <div class="code-name">.icon-arrow-right-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-filter"></span>
            <div class="name">
              筛选2
            </div>
            <div class="code-name">.icon-filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-success-circle"></span>
            <div class="name">
              yes_line
            </div>
            <div class="code-name">.icon-success-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-out"></span>
            <div class="name">
              out
            </div>
            <div class="code-name">.icon-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-time"></span>
            <div class="name">
              时 间
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-repair"></span>
            <div class="name">
              919菜单_修理
            </div>
            <div class="code-name">.icon-repair
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-refresh"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-date"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.icon-date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-baobiao"></span>
            <div class="name">
              报表
            </div>
            <div class="code-name">.icon-baobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-app"></span>
            <div class="name">
              应用中心
            </div>
            <div class="code-name">.icon-app
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-msg"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-msg
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-email"></span>
            <div class="name">
              e-mail, letter, envelope, post, mail
            </div>
            <div class="code-name">.icon-email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-user"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-up"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-left"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon icon-arrow-right"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
        </ul>
		</div>

		<mj-title type="h5" title="API"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>type</td>
					<td>图标名称</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>size</td>
					<td>图标尺寸，单位px</td>
					<td>Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>custom</td>
					<td>自定义图标</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>color</td>
					<td>自定义图标颜色</td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
import '../assets/font/demo.css'

export default {
	data() {
		return {
			fontList:'',//icon list
		}
	},
}
</script>

<style scoped>
a:focus {outline:none !important;}
.icon_lists li {vertical-align: top;}
pre[class*=language-].line-numbers {line-height:1.75}
</style>
